<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png">
    <Demo msg="Welcome to Your Vue.js App"/>
    <div class="card-wrap">
      <div v-for="item in cardData" :key="item.title">
        <DemoCard :cardInfo="item"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Demo from './components/Demo.vue'
import DemoCard from './components/Card/index.jsx'

const cardData = ref([{
  title: '我是卡片标题1',
  content: '我是卡片内容，随便填写的内容'
},{
  title: '我是卡片标题2',
  content: '我是卡片内容，随便填写的内容'
},{
  title: '我是卡片标题3',
  content: '我是卡片内容，随便填写的内容'
}])
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  margin: 100px auto 0;
  padding: 0;
  width: 1000px;
}

.card-wrap {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
}
</style>
